<template>
	<div id="app">
		<!-- 全局api -->
		<GlobalApi msg="我是全局API组件" v-if="ShowComponent === 'GlobalApi'" />
		<!--  选项/data -->
		<OptionData v-if="ShowComponent === 'OptionData'" />
		<OptionDom v-if="ShowComponent === 'OptionDom'" />
		<!-- 使用混合 -->
		<Mixins v-if="ShowComponent === 'Mixins'" />
		<!-- 使用provide / inject传递数据 -->
		<Provide v-if="ShowComponent === 'Provide'" />
		<!-- 使用model与v-model分析 -->
		<Model v-if="ShowComponent === 'Model'" />
		<!-- 实例上的分析 -->
		<Property v-if="ShowComponent === 'Property'" />
		<!-- 自定义事件  -->
		<CustomEvent v-if="ShowComponent === 'CustomEvent'" />
		<!--attributeIs  特殊属性Is  -->
		<AttributeIs v-if="ShowComponent === 'AttributeIs'" />
		<!-- keepAlive使用 -->
		<KeepAlive v-if="ShowComponent === 'KeepAlive'" />
		<!-- 插槽slot -->
		<SlotText v-if="ShowComponent === 'SlotText'" />
	</div>
</template>

<script>
import GlobalApi from "./pages/GlobalApi//GlobalApi.vue";
import OptionData from "./pages/optionData/index.vue";
import OptionDom from "./pages/optionDom/index.vue";
import Mixins from "./pages/mixins/index.vue";
import Provide from "./pages/provide/index.vue";
import Model from "./pages/Model/index.vue";
import Property from "./pages/Property/index.vue";
import CustomEvent from "./pages/CustomEvent/index.vue";
import AttributeIs from "./pages/AttributeIs/index.vue";
import KeepAlive from "./pages/KeepAlive/index.vue";
import SlotText from "./pages/SlotText/index.vue";

export default {
	name: "App",
	data() {
		return {
			show: "",
			// ShowComponent: "GlobalApi", //:全局api
			// ShowComponent: "OptionData", //:选项/数据
			// ShowComponent: "OptionDom", //：选项/Dom
			// ShowComponent: "mixins", //使用混合
			// ShowComponent: "Provide", //使用provide / inject传递数据
			// ShowComponent: "Model", //使用model与v-model分析
			// ShowComponent: "Property", //Vm实例上属性分析
			// ShowComponent: "CustomEvent", //自定义事件
			// ShowComponent: "AttributeIs", //特殊属性is
			// ShowComponent: "KeepAlive", //keep-alive使用
			ShowComponent: "SlotText", //slot使用
		};
	},
	components: {
		GlobalApi,
		OptionData,
		OptionDom,
		Mixins,
		Provide,
		Model,
		Property,
		CustomEvent,
		AttributeIs,
		KeepAlive,
		SlotText,
	},
	a: 1,
	mounted() {
		// 此处的this是实例对象
		// 要查找配置对象this.$options
		// console.log("App", this.$options.a);
	},
};
</script>

<style></style>
